<template>
  <div id="SelectByDepList">
    <el-table :data="DataList" border @row-click="clickRow" v-loading="loading">
      <el-table-column property="code" label="编号" />
      <el-table-column property="name" label="名称" />
    </el-table>
    <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalResult"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
let { proxy }: any = getCurrentInstance();
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { log } from 'console';
// 加载状态
let loading = ref(false);
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: 5,
  totalResult: 0
});
// 搜索关键字
let keywords = ref('');
// 数据列表
let DataList = reactive([]);
getDataList();
//获取数据
function getDataList() {
  loading.value = true;
  let modulePageParam = {params:{
    pageIndex: page.currentPage,
    pageSize: page.pageSize,
    keywords: keywords.value
  }};
  DataList.length = 0; //放入数据前清空数组
  proxy.$http.get('/api/sys/getPageModules', modulePageParam).then((res: any) => {
    if (res.status.code === 1) {
      // console.log('模块数据列表', res.status.code);
      page.totalResult = res.data.modulePageList.total;
      DataList.push(...res.data.modulePageList.records);
      loading.value = false;
      // VXETable.modal.message({ content: res.status.msg, status: 'success' });
    } else {
      VXETable.modal.message({ content: res.status.msg, status: 'error' });
      loading.value = false;
      return;
    }
  });
}

// 点击数据当前行
function clickRow(row) {
  proxy.$emit('selectClick', row);
}

//更换一页显示数量
function handleSizeChange(val) {
  page.pageSize = val;
  getDataList();
}

// 点击下一页
function handleCurrentChange(val) {
  page.currentPage = val;
  getDataList();
}
</script>

<style lang="scss" scoped>
</style>